<template>
  <v-card flat height="168" class="px-5 pt-8">
    <v-form ref="form">
      <v-row no-gutters>
        <v-col class="text-left" cols="3" offset="1"> Reason </v-col>
        <v-col class="text-left" cols="6">
          <v-text-field
            v-model="reason"
            v-validate="'required'"
            name="Reason"
            placeholder="please enter the reason"
            class="white-input"
            solo
            dense
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Reason") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters class="mt-4">
        <v-col class="text-left" cols="3" offset="1"> End Date </v-col>
        <v-col class="text-left" cols="3">
          <PickerInput
            v-model="endDate"
            v-validate="'required'"
            name="End Date"
            placeholder="Select End Date"
            hide-details
          ></PickerInput>
          <span class="vee-validate-error">
            {{ errors.first("End Date") }}
          </span>
        </v-col>
      </v-row>
    </v-form>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import PickerInput from "@/components/Maintenance/PickerInput/PickerInput.vue";
import VForm from "vuetify/src/components/VForm/index";
import { getDate } from "@/common/constants/Utils";
@Component({
  components: {
    PickerInput,
  },
})
export default class DisposeDetails extends Vue {
  reason = "";
  endDate = getDate("-");

  resetForm() {
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
    this.$nextTick(() => {
      this.endDate = getDate("-");
    });
  }

  async validateFormData() {
    const valid: boolean = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }

  getFormData() {
    return {
      reason: this.reason,
      endDate: this.endDate,
    };
  }
}
</script>
<style lang="scss" scoped>
@import "@/components/Customer/Dialog/DisposeDetails/DisposeDetails.scss";
</style>
